<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      lang="en">
<head>
    <meta charset="utf-8">
    <title>-首页-</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layui-v2.6.4/layui/css/layui.css"/>
    <script src="layui-v2.6.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
</head>
<style>
    body {
        height: 100%;
        background: linear-gradient(90deg, #818181, #C9CACB, #C9CACB, white, white, white, white, white, white, white, white, #C9CACB, #C9CACB, #818181);
    }
</style>
<body>
<div class="div_top" th:replace="include/top"></div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md2 layui-col-xs2" style="background-color: #ffb09c;height:300px">
            <div id="demo" style="clear:both; overflow:hidden; height:100%;width:100%;margin:0 auto;">
                <div id="demo1" style="width: 100%">
                    <!-- 定义图片 -->
                    <ul style="width: 100%;">
                        <li style="width: 100%"><img style="width: 100%" src="./img/img1.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img2.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img3.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img4.png"/></li>
                    </ul>
                </div>
                <div id="demo2" style="width: 100%;"></div>
            </div>
            <script>
                var speed = 30
                document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML

                function Marquee() {
                    if (document.getElementById("demo2").offsetTop - document.getElementById("demo").scrollTop <= 0)
                        document.getElementById("demo").scrollTop -= document.getElementById("demo1").offsetHeight
                    else {
                        document.getElementById("demo").scrollTop++
                    }
                }

                var MyMar = setInterval(Marquee, speed)
                document.getElementById("demo").onmouseover = function () {
                    clearInterval(MyMar)
                }
                document.getElementById("demo").onmouseout = function () {
                    MyMar = setInterval(Marquee, speed)
                }
            </script>
        </div>


        <div class="layui-col-md8 layui-col-xs8" style="background-color: #beff9b;">
            <div class="layui-carousel" id="test1">
                <div carousel-item="">
                    <div style="background:url('img/index/hua1.png');background-size: 100% 100%; "></div>
                    <div style="background:url('img/index/hua2.png');background-size: 100% 100%; "></div>
                    <div style="background:url('img/index/hua3.png');background-size: 100% 100%; "></div>
                    <div style="background:url('img/index/hua4.png');background-size: 100% 100%; "></div>
                    <div style="background:url('img/index/hua5.png');background-size: 100% 100%; "></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md2 layui-col-xs2" style="background-color: #ffb09c;height:300px">
            <div id="demo3" style="clear:both; overflow:hidden; height:100%;width:100%;margin:0 auto;">
                <div id="demo4" style="width: 100%">
                    <!-- 定义图片 -->
                    <ul style="width: 100%;">
                        <li style="width: 100%"><img style="width: 100%" src="./img/img1.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img2.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img3.png"/></li>
                        <li style="width: 100%"><img style="width: 100%" src="./img/img4.png"/></li>
                    </ul>
                </div>
                <div id="demo5" style="width: 100%;"></div>
            </div>
            <script>
                var speed1 = 30
                document.getElementById("demo5").innerHTML = document.getElementById("demo4").innerHTML

                function Marquee1() {
                    if (document.getElementById("demo5").offsetTop - document.getElementById("demo3").scrollTop <= 0)
                        document.getElementById("demo3").scrollTop -= document.getElementById("demo4").offsetHeight
                    else {
                        document.getElementById("demo3").scrollTop++
                    }
                }

                var MyMar1 = setInterval(Marquee1, speed1)
                document.getElementById("demo3").onmouseover = function () {
                    clearInterval(MyMar1)
                }
                document.getElementById("demo3").onmouseout = function () {
                    MyMar1 = setInterval(Marquee1, speed1)
                }
            </script>
        </div>
    </div>
</div>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            height: '300px',
            arrow: 'hover' //始终显示箭头
            // ,anim: 'updown' //切换动画方式
            ,
            interval: 3000
        });
    });
</script>
<div class="layui-container">
    <blockquote class="layui-elem-quote" style="margin: 0;padding: 5px">
        <fieldset class="layui-elem-field layui-field-title" style="margin: 10px;padding: 0px">
            <legend>热门</legend>
        </fieldset>
    </blockquote>
    <div class="layui-fluid" style="background: #FFFFFF;margin-top: 10px;">
        <ul class="flow-default layui-nav layui-row " style="background-color: #FFFFFF;" id="hostFiction">
        </ul>
    </div>
    <blockquote class="layui-elem-quote" style="margin: 0;padding: 5px">
        <fieldset class="layui-elem-field layui-field-title" style="margin: 10px;padding: 0px;">
            <legend>最新</legend>
        </fieldset>
    </blockquote>
    <div class="layui-fluid" style="background: #FFFFFF;margin-top: 10px;">
        <ul class="flow-default layui-nav layui-row " style="background-color: #FFFFFF;" id="newFiction">
        </ul>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    var hostlist = /*[[${session.byhost}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var himglist = /*[[${session.hostimg}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#hostFiction', //流加载容器
            scrollElem: '#hostFiction', //滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) { //加载下一页
                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 3; i++) {
                        lis.push(
                            '<a href="#" style="color:white;">' +
                            '<li class="layui-nav-item layui-col-xs4 layui-col-xs-offset0  layui-col-lg4 layui-col-lg-offset0" onmouseover="overit(this)" onclick="toFicHost(this,' + page + ',' + i + ');">' +
                            '<img class="layui-col-xs10 layui-col-xs-offset1 layui-col-lg10 layui-col-lg-offset1" src="img/fiction/' + himglist[eval((page - 1) * 3 + i)] + '" width="80%" height="224px" style="padding:20px">' +
                            '<span class="layui-col-xs10 layui-col-xs-offset1 layui-col-lg10 layui-col-lg-offset1" style="position: absolute;background-color:#505658;z-index:13;height:40px;' +
                            'text-align:center;bottom:20px;display:none;">' + hostlist[eval((page - 1) * 3 + i)] + '</span>' +
                            '</li>' +
                            '</a>'
                        )
                    }
                    next(lis.join(''), page < 4); //假设总页数为 6
                }, 500);
            }
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">
    var timelist = /*[[${session.bytime}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var timglist = /*[[${session.timeimg}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#newFiction', //流加载容器
            scrollElem: '#newFiction', //滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) { //加载下一页
                //模拟插入
                setTimeout(function () {
                    var lis = [];
                    for (var i = 0; i < 3; i++) {
                        lis.push(
                            '<a style="color:white;">' +
                            '<li class="layui-nav-item layui-col-xs4 layui-col-xs-offset0  layui-col-lg4 layui-col-lg-offset0" onmouseover="overit(this)" onclick="toXX(this,' + page + ',' + i + ')" >' +
                            '<img class="layui-col-xs10 layui-col-xs-offset1 layui-col-lg10 layui-col-lg-offset1" src="img/fiction/' + timglist[eval((page - 1) * 3 + i)] + '" width="80%" height="250px" style="padding:20px">' +
                            '<span class="layui-col-xs10 layui-col-xs-offset1 layui-col-lg10 layui-col-lg-offset1" style="position: absolute;background-color:#505658;z-index:13;height:40px;' +
                            'text-align:center;bottom:20px;display:none;">' + timelist[eval((page - 1) * 3 + i)] + '</span>' +
                            '</li>' +
                            '</a>'
                        )
                    }
                    next(lis.join(''), page < 4); //假设总页数为 6
                }, 500);
            }
        });
    });
</script>
<script type="text/javascript">
    function overit(ele) {
        // $.ajax({
        // 	 url:
        // 	,
        // })
        //
        $(ele).hover(function () {
            $(ele).find("span").css("display", "block");
        }, function () {
            $(ele).find("span").css("display", "none");
        });
    }

    function toXX(ele, page, i) {
        var index = eval((page - 1) * 3 + i + 1);
        location.assign("tofictionxx?index=" + index);
    }

    function toFicHost(ele, page, i) {
        var index = eval((page - 1) * 3 + i + 1);
        location.assign("tofictionhost?index=" + index);
    }
</script>
</body>
</html>